<section class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">{{ setSectionTitle }}</h2>
  </bit-section-header>
  <read-only-cipher-card>
    <bit-form-field *ngIf="card.cardholderName">
      <bit-label [appTextDrag]="card.cardholderName">{{ "cardholderName" | i18n }}</bit-label>
      <input
        id="cardholderName"
        readonly
        bitInput
        type="text"
        [value]="card.cardholderName"
        aria-readonly="true"
        data-testid="cardholder-name"
      />
    </bit-form-field>
    <bit-form-field *ngIf="card.number">
      <bit-label [appTextDrag]="card.number">{{ "number" | i18n }}</bit-label>
      <input
        id="cardNumber"
        readonly
        bitInput
        type="password"
        [value]="card.number | creditCardNumber: cipher.card.brand"
        aria-readonly="true"
        data-testid="cardholder-number"
        class="tw-font-mono"
      />
      <button
        bitSuffix
        type="button"
        bitIconButton
        bitPasswordInputToggle
        data-testid="toggle-number"
        [toggled]="revealCardNumber"
        (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardNumberVisible)"
      ></button>
      <button
        bitIconButton="bwi-clone"
        bitSuffix
        type="button"
        [appCopyClick]="card.number"
        showToast
        [valueLabel]="'number' | i18n"
        [appA11yTitle]="'copyNumber' | i18n"
        data-testid="copy-number"
      ></button>
    </bit-form-field>
    <bit-form-field *ngIf="card.expiration">
      <bit-label [appTextDrag]="card.expiration">{{ "expiration" | i18n }}</bit-label>
      <input
        id="expiration"
        readonly
        bitInput
        type="text"
        [value]="card.expiration"
        aria-readonly="true"
        data-testid="cardholder-expiration"
      />
    </bit-form-field>
    <bit-form-field *ngIf="card.code">
      <bit-label [appTextDrag]="card.code">{{ "securityCode" | i18n }}</bit-label>
      <input
        id="securityCode"
        readonly
        bitInput
        type="password"
        [value]="card.code"
        aria-readonly="true"
        data-testid="cardholder-code"
        class="tw-font-mono"
      />
      <button
        bitSuffix
        type="button"
        bitIconButton
        bitPasswordInputToggle
        data-testid="toggle-code"
        [toggled]="revealCardCode"
        (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardCodeVisible)"
      ></button>
      <button
        bitIconButton="bwi-clone"
        bitSuffix
        type="button"
        [appCopyClick]="card.code"
        showToast
        [valueLabel]="'securityCode' | i18n"
        [appA11yTitle]="'copySecurityCode' | i18n"
        data-testid="copy-code"
        (click)="logCardEvent(true, EventType.Cipher_ClientCopiedCardCode)"
      ></button>
    </bit-form-field>
  </read-only-cipher-card>
</section>
